<template>
	<view>
		<text
			style="position: absolute;margin-left: 20rpx;font-size: 30px;">{{ RunOrdertListL[0].Orderstatus===1?'等待付款':RunOrdertListL[0].Orderstatus===2?'等待收货':RunOrdertListL[0].Orderstatus===3?'交易完成':RunOrdertListL[0].Orderstatus===4?'交易取消':''}}</text>
		<view class="Detail_1">
			<uni-card margin="20rpx 30rpx 20rpx 30rpx" :title="RunOrdertListL[0].Orderstatus===1?RunOrdertListL[0].remarks:RunOrdertListL[0].Orderstatus===2?RunOrdertListL[0].remarks:RunOrdertListL[0].Orderstatus===3?RunOrdertListL[0].remarks:RunOrdertListL[0].Orderstatus===4?RunOrdertListL[0].remarks:''" 
			sub-title="'如果您对订单有什么疑问请联系客服！" @click="onClick">
				<!-- 功能区1 -->
				<view class="myUn1">
					<view class="myUn4" v-for="(item,value) in Gongne" :key=value 
					 v-if="RunOrdertListL[0].Orderstatus===1?item.id===1 || item.id===2 || item.id===3:RunOrdertListL[0].Orderstatus===2?item.id===4 || item.id===3:RunOrdertListL[0].Orderstatus===3?item.id===3:RunOrdertListL[0].Orderstatus===4?item.id===3:''"
					 @click="GongneTo(item.id)"
						:style="RunOrdertListL[0].Orderstatus===1?item.id===1?'left: 20rpx;':item.id===2?'left: 220rpx;':item.id===3?'left: 420rpx;':'':RunOrdertListL[0].Orderstatus===2?item.id===4?'left: 130rpx;':item.id===3?'left: 300rpx;':'':RunOrdertListL[0].Orderstatus===3 || RunOrdertListL[0].Orderstatus===4?item.id===3?'left: 220rpx;':'':''">
						<image class="myUn5" :src="item.img"></image>
						<text class="myUn6">{{ item.name }}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="uni_card_1">
			<uni-card margin="10px 15px 10px 15px" v-for="(item,value) in RunOrdertListL" :key="value" title="跑腿订单"
				:sub-title="'订单编号:'+item.no"
				:extra="item.Orderstatus===1?'已接单':item.Orderstatus===2?'已完成':item.Orderstatus===3?'异常单':item.Orderstatus===4?'已取消':''"
				v-if="GreadId===0?item.Orderstatus===1 || item.Orderstatus===2 || item.Orderstatus===3 || item.Orderstatus===4:GreadId===1?item.Orderstatus===1:GreadId===2?item.Orderstatus===2:GreadId===3?item.Orderstatus===3:GreadId===4?item.Orderstatus===4:''"
				padding="10px 0" :thumbnail="avatar">
				<view class="" style="width: 646rpx;">
					<image style="width: 100px;height: 100px;border-radius: 15px;" :src="cover"></image>
					<text class="uni-body uni-mt-5 card_cl_1" v-if="item.type2===1">跑腿服务-帮我取</text>
					<text class="uni-body uni-mt-5 card_cl_1" v-else-if="item.type2===2">跑腿服务-帮我买</text>
					<text class="uni-body uni-mt-5 card_cl_2">正常件</text>
					<text class="uni-body uni-mt-5 card_cl_3">配送至-{{ item.Range }}</text>
					<text class="uni-body uni-mt-5 card_cl_4">x1</text>
					<text class="card_cl_5">酬金：<text style="color: red;">{{ item.price }}</text> </text>
				</view>
			</uni-card>
		</view>
		<view class="uni_card_2">
			<uni-card title="配送信息" margin="10px 15px 10px 15px" v-for="(item,value) in RunOrdertListL" :key="value">
				<view class="uni_card_3">
					<view class="">
						<text class="card_cl2_1">上门时间：</text>
						<text class="card_cl2_2">{{ item.Pick_uptime}}</text>
					</view>
					<view class="aa1">
						<text class="card_cl2_3">配送地址：</text>
						<text class="card_cl2_4">{{ item.stext }}</text>
					</view>
					<view class="aa1">
						<text class="card_cl2_5">收件人信息：</text>
						<text class="card_cl2_6">{{ item.userName }}-{{ item.phone }}</text>
					</view>

				</view>

			</uni-card>
		</view>
		<view class="uni_card_4">
			<uni-card title="骑手信息" margin="10px 15px 10px 15px" v-for="(item,value) in RunOrdertListL" :key="value">
				<view class="" style="height: 200rpx;">
					<view class="aa1">
						<text class="" style="">骑手：</text>
						<text class="" style="float: right;width: 60%;">方晓佳</text>
					</view>
					<view class="aa1">
						<text class="">骑手电话：</text>
						<text class="" style="float: right;width: 60%;">13559453225</text>
					</view>
		
				</view>
		
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				GreadId: 0, //0 全部 1 已接单 2 已完成 3 异常单 4 已取消
				RunOrdertListL: [], //跑腿订单信息
				status: 'more', //动态加载状态
				pageNum: 1, //当前加载页数
				Fwsum: 0, //计算区域内订单的数里
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				Gongne: [{
						id: 1,
						name: '取消订单',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-Order_details/%E5%88%86%E6%9C%9F%EF%BC%8D%E5%8F%96%E6%B6%88%E8%AE%A2%E5%8D%95.png',
					},
					{
						id: 2,
						name: '立即支付',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-Order_details/%E6%94%AF%E4%BB%98.png',
					},
					{
						id: 3,
						name: '联系客服',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-Order_details/%E5%AE%A2%E6%9C%8D.png',
					},
					{
						id: 4,
						name: '联系客户',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-Order_details/%E7%94%B5%E8%AF%9D%E8%81%94%E7%B3%BB.png',
					},
					
				], //图片数据
			};
		},
		onLoad() {
			const that = this
			uni.getStorage({
				key: 'MyOrderDetails',
				success: function(res) {
					that.RunOrdertListL.push(res.data)
				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.Detail_1 {
		position: relative;
		top: 100rpx;
	}

	/deep/ .uni-card .uni-card__header {
		display: flex;
		border-bottom: 1px rgba(26, 188, 156, 1) solid;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		overflow: hidden;
	}

	.myUn1 {
		position: relative;
		width: 95%;
		height: 140rpx;
		background-color: #ffffff;
		display: flex;
		border-radius: 15px;
		top: 10rpx;
		left: 20rpx;
	}

	.myUn2 {
		position: absolute;
		border-bottom: 2px solid #1ABC9C;
		width: 95%;
		height: 80rpx;
		left: 20rpx;
	}

	.myUn3 {
		position: absolute;
		top: 14rpx;
		width: 128rpx;
		height: 44rpx;
		display: flex;
		font-family: auto;
		font-weight: 400;
		font-style: normal;
		font-size: 32rpx;
		color: #000000;
	}

	.myUn4 {
		position: absolute;
		width: 140rpx;
		height: 140rpx;
	}

	.myUn5 {
		position: absolute;
		left: 34rpx;
		top: 10rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.myUn6 {
		position: absolute;
		font-size: 27rpx;
		color: #999999;
		top: 80rpx;
		left: 14rpx;
	}

	.uni_card_1 {
		position: absolute;
		top: 430rpx;
		font-size: 30rpx;
	}

	.card_cl_1 {
		position: absolute;
		padding-left: 20rpx;
		font-size: 30rpx;
	}

	.card_cl_2 {
		position: absolute;
		padding-left: 20rpx;
		padding-top: 60rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.card_cl_3 {
		position: absolute;
		padding-left: 20rpx;
		padding-top: 120rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.card_cl_4 {
		position: absolute;
		padding-left: 400rpx;
		padding-top: 50rpx;
		color: rgb(26, 188, 156);
	}

	.card_cl_5 {
		position: absolute;
		padding-left: 280rpx;
		padding-top: 140rpx;
		font-size: 24rpx;
	}

	.card-actions {
		border-top: 1px rgba(26, 188, 156, 1) solid;
		padding-top: 20rpx;
	}

	.uni_card_2 {
		position: absolute;
		top: 820rpx;
	}

	.uni_card_3 {
		width: 606rpx;
		height: 300rpx;
	}

	.card_cl2_1 {}

	.card_cl2_2 {
		float: right;
		color: red;
		font-size: initial;
		margin-right: 30rpx;
	}

	.card_cl2_3 {
		position: absolute;
		left: 40rpx;
		top: 200rpx;
	}

	.card_cl2_4 {
		float: right;
		width: 60%;
		margin-top: 40rpx;
	}

	.card_cl2_5 {
		position: absolute;
		left: 40rpx;
		top: 300rpx;
	}

	.card_cl2_6 {
		position: absolute;
		left: 300rpx;
		float: right;
		top: 300rpx;
		font-size: initial;
	}

	.aa1 {
		width: 606rpx;
		height: 100rpx;
	}
	.uni_card_4{
		position: absolute;
		top: 1260rpx;
	}
</style>
